{% extends "base.html" %}
{%block header_js %}
<script type="text/javascript" src="/static/js/highcharts.js"></script>
<script type="text/javascript" src="/static/js/exporting.js"></script>
<script type="text/javascript" src="http://111.161.25.9/static/js/jquery.js"></script>
<script type="text/javascript">
function deleteHost(id){
    var ret =confirm("确定要删除主机吗?关联的");
    if(ret == false){
        return false;
    }
    $.getJSON("/host/remove/?id="+ id, function(data){
        if(data['flag'] == "SUCC"){
            alert("删除主机成功!");
            $("#host_" + id).empty();
        }else{
            alert("删除主机失败");
        }
    });
};

$(document).ready(function() {
       $.get('/service/getchart/?table={{table}}&items=cpu&title=cpu_usage&div=contain_cpu',function(data){ eval(data); });
       $.get('/service/getchart/?table={{table}}&items=memory&title=mem_usage&div=contain_mem',function(data){ eval(data); });
       $.get('/service/getchart/?table={{table}}&items=load&title=load&div=contain_load',function(data){ eval(data); });
       $.get('/service/getchart/?table={{table}}&items=eth0-send:eth0-recv&title=eth0&div=contain_eth0',function(data){ eval(data); });
       $("#browser").treeview();

});
</script>
{% endblock %}

<body>
{% block header %}
{% include "host-menu.html" %}
{% endblock %}

{% block content %}
<div class="wrap">
	<div class="wrap_right tree">
	{% autoescape off %}
	    {{ tree }}
	{% endautoescape %}
	</div>
	<div class="wrap_left right">
		<div class="shenqing1">
			<h5 style="float:left;width:96%;margin-bottom:10px;">主机详情</h5>
		</div>
		{% include "host-info.html" %}
		<div class="biaoge">
	        <table width="100%"  border="0" cellpadding="0" cellspacing="0" class="table2 center">
			<tr>
				<th colspan="2" class="td_left" style="text-align:left;"><h2>主机：192.168.0.1 </h2></th>
			</tr>
			<tr class="g2" colspan="2"><td><h2>CPU详情</h2></td></tr>
			<tr class="g2" colspan="2">
	            <td class="td_left" colspan="2" style="text-align:center;">
	                <div id='contain_cpu'>a</div>
	            </td>
			</tr>
			<tr class="g2" colspan="2"><td><h2>内存详情</h2></td></tr>
			<tr class="g2" colspan="2">
	            <td class="td_left" colspan="2" style="text-align:center;">
	                <div id='contain_mem'></div> 
	            </td>
			</tr>
			<tr class="g2" colspan="2"><td><h2>负载详情</h2></td></tr>
			<tr class="g2" colspan="2">
	            <td class="td_left" colspan="2" style="text-align:center;">
	                <div id='contain_load'></div> 
	            </td>
			</tr>
			<tr class="g2" colspan="2"><td><h2>网络详情</h2></td></tr>
			<tr class="g2" colspan="2">
	            <td class="td_left" colspan="2" style="text-align:center;">
	                <div id='contain_eth0'></div> 
	            </td>
			</tr>
	        </table>
		</div>
		<div class="biaoge">
			<table width="100%"  border="0" cellpadding="0" cellspacing="0" class="table2">
		        <tr>
			        <th width="15%"><span class="first">URL</span></th>
			        <th width="15%">监控名</th>
			        <th width="10%">状态</th>
			        <th width="10%">监控类型</th>
			        <th width="10%">监控频率</th>
			        <th width="10%">报警组</th>
			        <th width="10%">策略组</th>
			        <th width="8%">可用率</th>
			        <th width="12%">操作</th>
		        </tr> 
		        {% for m in monitor %}
				<tr class="{% cycle 'g1' 'g2' %}">
					<td class="td_left"><span class="first style1">{{ m.url }}</span></td>
					<td class="td_mid"><a href="/monitor/detail?id={{ m.id }}">{{ m.name }}</a></td>
					<td>{{ m.status }}</td>
					<td>{{ m.tpl }}</td>
					<td>{{ m.freq }}</td>
					<td>{{ m.g }}</td>
					<td>{{ m.s }}</td>
					<td>100%</td>
					<td>
						{% ifequal m.open 'T' %}
		                	<a href="/monitor/status?id={{ m.id }}&do=stop" >暂停</a>|
		                {% endifequal  %}
		                {% ifequal m.open 'F' %}
		                	<a href="/monitor/status?id={{ m.id }}&do=start" >开始</a>|
		                {% endifequal  %}
						<a href="/monitor/edit?id={{ m.id }}">修改</a>|
						<a href="/monitor/delete?id={{ m.id }}" onclick="if(confirm('确定删除本组么？')){}else{return false;}";>删除</a>
					</td>
	    		</tr>
		        {% endfor %} 
			</table>
		</div>
	</div>
</div>
{% endblock %}

</body>
</html>
